---
title: Tailwind CSS Dropdown Menu - Material Tailwind
description: Get started easier with our dropdown menu component examples styled with Tailwind CSS to let the users access different parts of an application or website. 
navigation:
  [
    "dropdown-menu",
    "nested-dropdown-menu",
    "notifications-dropdown-menu",
    "profile-dropdown-menu",
    "dropdown-menu-trigger-data-attributes",
    "required-script",
    "more-examples",
  ]
github: menu
prev: list
next: navbar
---

# Tailwind CSS Dropdown Menu

Use our responsive Tailwind CSS dropdown menu, that can take the user anywhere on your web app!

Our dropdown menu displays a list of choices on temporary surfaces. It appears when users interact with a button, action, or other control. When a user clicks/hovers over the parent element, the dropdown menu appears, presenting a vertically stacked list of actions.

See below our dropdown menu examples that you can use in your Tailwind CSS project. The example comes in different colors and styles, so you can adapt them easily to your needs.

To create a menu you can use the <Link href="/docs/html/popover#popover-trigger-data-attribute"><Code>data-popover-target="`{menuName}`"</Code></Link> and <Link href="/docs/html/popover#popover-data-attribute"><Code>data-popover="`{menuName}`"</Code></Link> data attributes.

<br />

## Dropdown Menu Examples:

## Default Dropdown Menu

This example showcases a simple and responsive dropdown menu component that includes a button to open the menu and a list (<Code>\<ul></Code>) that represents the menu itself. 

<CodePreview
  id="dropdown-menu"
  link="menu#menu"
  component={<HTMLMenuExamples.MenuDefault/>}
>
```html
<button 
  data-popover-target="menu"
  class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
  Open Menu
</button>
<ul
  role="menu"
  data-popover="menu"
  data-popover-placement="bottom"
  class="absolute z-10 min-w-[180px] overflow-auto rounded-lg border border-slate-200 bg-white p-1.5 shadow-lg shadow-sm focus:outline-none"
>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Menu Item 1`}
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Menu Item 2`}
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Menu Item 3`}
  </li>
</ul>
```
</CodePreview>

---

## Nested Dropdown Menu

Use this component example if you want to implement a nested dropdown menu structure. You can do this by adding a  <Code>data-popover-target="nested-menu"</Code> attribute on one of the menu items, so that selecting this item will open another menu adjacent to the current one.

You can create nested/multi-level menus by setting the <Link href="/docs/html/popover#popover-trigger-data-attributes"><Code>data-popover-nested="true"</Code></Link> data attribute to the menu trigger element.

<CodePreview
  id="nested-dropdown-menu"
  link="menu#nested-menu"
  component={<HTMLMenuExamples.NestedMenu/>}
>
```html
<button 
  data-popover-target="menu-1"
  data-popover-nested="true"
  class="rounded-md bg-slate-800 py-2 px-4 border border-transparent text-center text-sm text-white transition-all shadow-md hover:shadow-lg focus:bg-slate-700 focus:shadow-none active:bg-slate-700 hover:bg-slate-700 active:shadow-none disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none ml-2" type="button">
  Open Menu
</button>
<ul
  role="menu"
  data-popover="menu-1"
  data-popover-placement="bottom"
  class="absolute z-10 min-w-[180px] overflow-auto rounded-lg border border-slate-200 bg-white p-1.5 shadow-lg shadow-sm focus:outline-none"
>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 text-sm flex w-full items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Menu Item 1`}
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 text-sm flex w-full items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Menu Item 2`}
  </li>
  <li
    role="menuitem"
    data-popover-target="nested-menu"
    class="cursor-pointer text-slate-800 text-sm flex w-full items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Nested Menu`}
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 text-sm flex w-full items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Menu Item 3`}
  </li>
</ul>
<ul
  role="menu"
  data-popover="nested-menu"
  data-popover-offset="20"
  data-popover-placement="right-start"
  class="absolute z-10 min-w-[180px] overflow-auto rounded-lg border border-slate-200 bg-white p-1.5 shadow-lg shadow-sm focus:outline-none"
>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 text-sm flex w-full items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Menu Item 1`}
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 text-sm flex w-full items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Menu Item 2`}
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 text-sm flex w-full items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    {`Menu Item 3`}
  </li>
</ul>
```
</CodePreview>

---

## Notifications Dropdown Menu

In the example below, the component consists of a notification button that, when clicked, reveals a dropdown menu containing individual notification items. Each notification item includes an image and text, providing a more engaging and informative user experience. 

<CodePreview
  id="notifications-dropdown-menu"
  link="menu#notifications-menu"
  className="mt-4"
  component={<HTMLMenuExamples.NotificationsMenu/>}
>
```html
<button data-popover-target="notifications-menu" class="rounded-md border border-transparent p-2.5 text-center text-sm transition-all text-slate-600 hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none" type="button">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 pointer-events-none">
    <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
  </svg> 
</button>
<ul
  role="menu"
  data-popover="notifications-menu"
  data-popover-placement="bottom"
  class="absolute z-10 min-w-[180px] overflow-auto rounded-lg border border-slate-200 bg-white p-1.5 shadow-lg shadow-sm focus:outline-none"
>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    <img
      alt="tania andrew"
      src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
      class="relative inline-block h-10 w-10 rounded-full object-cover object-center"
    />
    <div class="flex flex-col gap-1 ml-4">
      <p class="text-slate-800 font-medium">
        Tania send you a message
      </p>
      <p class="text-slate-500 text-sm flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 mr-1 text-slate-400">
          <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z" clip-rule="evenodd" />
        </svg>

        13 minutes ago
      </p>
    </div>
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    <img
      alt="natali craig"
      src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1061&amp;q=80"
      class="relative inline-block h-10 w-10 rounded-full object-cover object-center"
    />
    <div class="flex flex-col gap-1 ml-4">
      <p class="text-slate-800 font-medium">
        Natali replied to your email.
      </p>
      <p class="text-slate-500 text-sm flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 mr-1 text-slate-400">
          <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z" clip-rule="evenodd" />
        </svg>
        1 hour ago
      </p>
    </div>
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    <img
      alt="paypal"
      src="https://dwglogo.com/wp-content/uploads/2016/08/PayPal_Logo_Icon.png"
      class="relative inline-block h-10 w-10 rounded-full  object-cover object-center"
    />
    <div class="flex flex-col gap-1 ml-4">
      <p class="text-slate-800 font-medium">
        You&apos;ve received a payment.
      </p>
      <p class="text-slate-500 text-sm flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 mr-1 text-slate-400">
          <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z" clip-rule="evenodd" />
        </svg>
        5 hours ago
      </p>
    </div>
  </li>
</ul>
```
</CodePreview>

---

## Profile Dropdown Menu

Use this profile dropdown menu component that is triggered by an image acting as a button. When clicked, it reveals a dropdown menu with various options like "My Profile," "Edit Profile," "Inbox," "Help," and "Sign Out." The dropdown menu provides a centralized location for users to access various aspects of their profile and settings, improving the site's navigational efficiency.

<CodePreview
  id="profile-dropdown-menu"
  link="menu#profile-menu"
  className="mt-4"
  component={<HTMLMenuExamples.ProfileMenu/>}
>
```html
<img
  alt="tania andrew"
  src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1480&amp;q=80"
  class="relative inline-block h-10 w-10 cursor-pointer rounded-full object-cover object-center"
  data-popover-target="profile-menu"
/>
<ul
  role="menu"
  data-popover="profile-menu"
  data-popover-placement="bottom"
  class="absolute z-10 min-w-[180px] overflow-auto rounded-lg border border-slate-200 bg-white p-1.5 shadow-lg shadow-sm focus:outline-none"
>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-slate-400">
      <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z" clip-rule="evenodd" />
    </svg>

    <p class="text-slate-800 font-medium ml-2">
      My Profile
    </p>
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-slate-400">
      <path fill-rule="evenodd" d="M7.84 1.804A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.804l.331 1.652a6.993 6.993 0 0 1 1.929 1.115l1.598-.54a1 1 0 0 1 1.186.447l1.18 2.044a1 1 0 0 1-.205 1.251l-1.267 1.113a7.047 7.047 0 0 1 0 2.228l1.267 1.113a1 1 0 0 1 .206 1.25l-1.18 2.045a1 1 0 0 1-1.187.447l-1.598-.54a6.993 6.993 0 0 1-1.929 1.115l-.33 1.652a1 1 0 0 1-.98.804H8.82a1 1 0 0 1-.98-.804l-.331-1.652a6.993 6.993 0 0 1-1.929-1.115l-1.598.54a1 1 0 0 1-1.186-.447l-1.18-2.044a1 1 0 0 1 .205-1.251l1.267-1.114a7.05 7.05 0 0 1 0-2.227L1.821 7.773a1 1 0 0 1-.206-1.25l1.18-2.045a1 1 0 0 1 1.187-.447l1.598.54A6.992 6.992 0 0 1 7.51 3.456l.33-1.652ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd" />
    </svg>

    <p class="text-slate-800 font-medium ml-2">
      Edit Profile
    </p>
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-slate-400">
      <path fill-rule="evenodd" d="M1 11.27c0-.246.033-.492.099-.73l1.523-5.521A2.75 2.75 0 0 1 5.273 3h9.454a2.75 2.75 0 0 1 2.651 2.019l1.523 5.52c.066.239.099.485.099.732V15a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-3.73Zm3.068-5.852A1.25 1.25 0 0 1 5.273 4.5h9.454a1.25 1.25 0 0 1 1.205.918l1.523 5.52c.006.02.01.041.015.062H14a1 1 0 0 0-.86.49l-.606 1.02a1 1 0 0 1-.86.49H8.236a1 1 0 0 1-.894-.553l-.448-.894A1 1 0 0 0 6 11H2.53l.015-.062 1.523-5.52Z" clip-rule="evenodd" />
    </svg>

    <p class="text-slate-800 font-medium ml-2">
      Inbox
    </p>
  </li>
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-slate-400">
      <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
    </svg>

    <p class="text-slate-800 font-medium ml-2">
      Help
    </p>
  </li>
  <hr class="my-2 border-slate-200" role="menuitem" />
  <li
    role="menuitem"
    class="cursor-pointer text-slate-800 flex w-full text-sm items-center rounded-md p-3 transition-all hover:bg-slate-100 focus:bg-slate-100 active:bg-slate-100"
  >
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-slate-400">
      <path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
      <path fill-rule="evenodd" d="M19 10a.75.75 0 0 0-.75-.75H8.704l1.048-.943a.75.75 0 1 0-1.004-1.114l-2.5 2.25a.75.75 0 0 0 0 1.114l2.5 2.25a.75.75 0 1 0 1.004-1.114l-1.048-.943h9.546A.75.75 0 0 0 19 10Z" clip-rule="evenodd" />
    </svg>

    <p class="text-slate-800 font-medium ml-2">
      Sign Out
    </p>
  </li>
</ul>
```
</CodePreview>

---

## Dropdown Menu Trigger Data Attributes

<span id="dropdown-menu-trigger-data-attributes" className="scroll-mt-48" />

The trigger element of the dropdown menu uses the <Link href="/docs/html/popover#popover-trigger-data-attributes" className="font-medium hover:text-blue-500">popover trigger data attribute</Link> to work.

---

## Dropdown Menu Data Attributes

<span id="dropdown-menu-data-attributes" className="scroll-mt-48" />

The menu element uses the <Link href="/docs/html/popover#popover-data-attributes" className="font-medium hover:text-blue-500">popover data attributes</Link> to work.

---

## Required Scripts

<span id="required-script" className="scroll-mt-56" />

The dropdown menu component needs the popover script to works, you just need to add the below script file to the bottom of your html file.

```html
<!-- from node_modules -->
<script
  type="module"
  src="node_modules/@material-tailwind/html@latest/scripts/popover.js"
></script>

<!-- from cdn -->
<script
  type="module"
  src="https://unpkg.com/@material-tailwind/html@latest/scripts/popover.js"
></script>
```
---

<span id="more-examples"></span>
## Explore More Tailwind CSS Examples
Check out more dropdown examples from <a href="https://www.material-tailwind.com/blocks" target="_blank">Material Tailwind Blocks</a>.
